<template>
   <div id="study">
		 <!-- <div v-if="chenload"> -->
			 <!-- 菜单 -->
			 <div class="top-warp">
			   <div class="nav">
			     <div :class="{'active':tabType==0}" @click="changeTab(0)">正在学习</div>
			     <div :class="{'active':tabType==1}" @click="changeTab(1)">学习完成</div>
			   </div>
			 </div>
			 
			 <!--全部-->
			 <mescroll-vue ref="mescroll0" v-show="tabType==0" :up="getMescrollUp(0)" @init="mescrollInit0">
			   <ul id="dataList0">
			     <li class="data-li" v-for="item in tab0.list">
			       <div class="bai"  @click="xiclick(item.type,item.relate_id,item.course_status)">
			       	<img :src="imgurl+item.thumb" alt="" class="img">
			       	<div class="fen" >
			       		<p>{{item.name}}</p>
			       		<p>
			       			<span class="jin">{{item.tag_name}}</span>
			       			<span class="time" style="color: #0287FF;" v-if="item.end_time==0||item.msg_type=='0'">永久有效</span>
			       			<span class="time" v-else></span>
			       		</p>
			       	</div>
							<!-- <mt-progress :value="60">
								<div slot="start">0%</div>
								<div slot="end">100%</div>
							</mt-progress>
							<mt-progress :value="20" :bar-height="5"></mt-progress> -->
			       	<van-progress  color="#0287FF" :percentage="item.rate" style="margin-top: 0.3rem" />
			       	<!-- <van-progress  color="#0287FF" :percentage="item.rate" style="margin-top: 0.3rem" /> -->
			       
			       	<p style="height:0.01rem;width: 100%;background:rgba(237,237,237,1);margin-top:0.4rem "></p>
			       </div>
			       
			     </li>
			   </ul>
			 </mescroll-vue>
			 
			 <!-- 学习完成-->
			 <mescroll-vue ref="mescroll1" v-show="tabType==1" :up="getMescrollUp(1)" @init="mescrollInit1">
			     <ul id="dataList1">
			 		<li class="data-li" v-for="item in tab1.list">
			 			<div class="bai" @click="xiclick(item.type,item.relate_id,item.course_status)">
			 				<img :src="imgurl+item.thumb" alt="" class="img">
			 				<div class="fen" >
			 					<p>{{item.name}}</p>
			 					<p>
			 						<span class="jin">{{item.tag_name}}</span>
			 						<span class="time" style="color: #0287FF;" v-if="item.end_time==0||item.msg_type=='0'">永久有效</span>
			 						<span class="time" v-else></span>
			 					</p>
			 				</div>
			 				<!-- <van-progress  color="#0287FF" :percentage="100" style="margin-top: 0.3rem" /> -->
			 				<div class="progress-line"></div>
							<p class="progrfinish">学习完成</p>
			 				<!-- <p style="height:0.01rem;width: 100%;background:rgba(237,237,237,1);margin-top:0.4rem "></p> -->
			 			</div>
			 		</li>
			     </ul>
			 </mescroll-vue>
			<!-- </div>
			<div class="loadmore" v-else>
				<img src="static/img/load.gif" alt="">
			</div> -->
      

   </div>
</template>

<script>
    // 引入mescroll的vue组件
    import MescrollVue from 'mescroll.js/mescroll.vue'
    
    export default {
      name: 'Collect',
      components: {
        MescrollVue
      },
      data () {
        return {
					imgSrc: require("../../assets/img/kongbai.png"),
          tab0: {mescroll: null, list: [], isListInit: false}, // 全部
          tab1: {mescroll: null, list: [], isListInit: false}, // 已付款
          tabType: 0 ,// 菜单类型
    	    imgurl:this.$store.state.img,
        }
      },
      methods: {
    	  xiclick(type,id,status){
					//type  1课程 2专题 3班级 4资讯 5活动
					if(status==0||status=='0'){    //0-下架 1-上架
						layer.open({
								content: '该课程已下架',
								skin: 'msg',
								time: 2 //1秒后自动关闭
						}); 
					}else{
						if(type==1||type=='1'){
							this.$router.push({
								path:'/course',
								query:{
									id:id
								}
							})
						}else if(type==2||type=='2'){
							this.$router.push({
								path:'/specialtopic',
								query:{
								 stid:id
								}
							})
						}else if(type==3||type=='3'){
							this.$router.push({
								path:'/class',
								query:{
								 bid:id
								}
							})
						}  
					}
    	  },
    	 
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit0 (mescroll) {
          mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
          this.tab0.mescroll = mescroll;
        },
        mescrollInit1 (mescroll) {
          mescroll.tabType = 1;
          this.tab1.mescroll = mescroll;
        },
        
        // 多mescroll的配置,需通过方法获取,保证每个配置是单例
        getMescrollUp (tabType) {
          let emptyWarpId = 'dataList' + tabType;
          return {
            auto: true,
            callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
            empty: {
              warpId: emptyWarpId, // 父布局的id;
              icon: this.imgSrc, // 图标,默认null
              tip: '您暂未有任何学习记录', // 提示
              
            },
            
          }
        },
     
        /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        upCallback (page, mescroll) {
			    var that = this;
          if (mescroll.tabType === 0) {
            // 学习中
            that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						that.axios.get(that.$store.state.url +'User/learnRate',{
							params:{
								type:0,
								page:page.num,
								limit:page.size
							}
						}).then(res=>{
							// console.log(111)
						 // that.chenload=true;
						 if(res.data.errcode==0||res.data.errcode=='0'){
							 var curPageData = res.data.data.learn;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
							 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
						 }
						})
    		
          } else if (mescroll.tabType === 1) {
            // 学习完成
    		    that.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
            that.axios.get(that.$store.state.url +'User/learnRate',{
            	params:{
            		type:1,
            		page:page.num,
            		limit:page.size
            	}
            }).then(res=>{
             // that.chenload=true;
             if(res.data.errcode==0||res.data.errcode=='0'){
            	 var curPageData = res.data.data.learn;
            	  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            	 if (page.num === 1) that.tab1.list = []; // 如果是第一页需手动制空列表
            	 that.tab1.list = that.tab1.list.concat(curPageData); // 追加新数据
             }
            })
          }
        },
    
        // 切换菜单
        changeTab (type) {
          let curTab = this.getTabData(this.tabType);// 当前列表
          let newTab = this.getTabData(type);// 新转换的列表
          // curTab.mescroll.hideTopBtn(); // 隐藏当前列表的回到顶部按钮
          this.tabType = type // 切换菜单
          if (!newTab.isListInit) {
            newTab.mescroll.triggerDownScroll(); // 加载列表
          } else {
          }
        },
        // 获取菜单对应的数据
        getTabData (tabType) {
          if (tabType == null) tabType = this.tabType;
          if (tabType === 0) {
            return this.tab0;
          } else if (tabType === 1) {
            return this.tab1;
          }
        },
      },
      mounted(){
		  
    // 	  this.getMescrollUp(this.tabType);
    // 	  this.getMescrollDown(this.tabType)
      }
      
    }
</script>

<style scoped>
	.progrfinish{
		text-align: right;
		color: #F97B43;
		font-size: .24rem;
		margin-top: .22rem;
	}
	.mescroll {
	  position: fixed;
	  top: .88rem;
	  bottom: 0;
	  height: auto;
	}
	
	.top-warp{
	  z-index: 9990;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: .88rem;
	  background-color: white;
	}
	.top-warp .head{
	  width: 100%;
	  height: .88rem;
	  line-height: .88rem;
	  text-align: center;
	}
	.top-warp .nav{
	  text-align: center;
	  height: .8rem;
	  background: white;
		box-shadow:0px 3px 5px 0px rgba(71,68,80,0.06);
		display: flex;
		justify-content: space-around;
	}
	.top-warp .nav > div{
		  font-weight: 600;
	  line-height: .8rem;
	  font-size: .3rem;
		color: #C2C9D3;
	}
	.top-warp .nav .active{
	  border-bottom: 2px solid #0287FF;
	  color: #0287FF;
	}
	
	/*展示上拉加载的数据列表*/
	.data-li{
	  position: relative;
	  padding-bottom: .3rem;
	  border-bottom: 1px solid #EDEDED;
	}
	.van-tabs.van-tabs--line .van-tabs__wrap{
		position: fixed !important;
	}
#study{
  padding-bottom: 0.3rem;
}
  .van-hairline--top-bottom::after{
    border-width: 0 0;
  }
  .van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
  .bai{
      width: 92%;
      margin: auto;
      margin-top: 0.4rem;
      position: relative;
    }
  .img{
    width: 2.1rem;
		height: 1.18rem;
    border-radius: 0.08rem;
    float: left;
  }
  .fen{
    margin-left: 2.3rem;
    /* height: 1.18rem; */
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .fen p:nth-child(1){
    width: 100%;
		height: .75rem;
    font-size:0.28rem;
    font-weight:500;
    color:rgba(51,51,51,1);
    margin-top: 0.05rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
  }
  .fen p:nth-child(2){
    width: 100%;
    margin: 0.1rem 0;
  }
  .jin{
    display: inline-block;
    width:1.29rem;
    height:0.37rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.19rem;
    text-align: center;
    line-height: 0.35rem;
    color: #0287FF;
    font-size: 0.24rem;
  }
  .time{
    float: right;
    font-size:0.26rem;
    color:rgba(153,153,153,1);
  }
  .success{
    position: absolute;
    right: 0.3rem;
    color: #F97B43;
    font-size: 0.23rem;
    bottom: 0.05rem;
  }
	.progress-line{
		width: 6.9rem;
		height: .06rem;
		margin-top: .3rem;
		background: #0287FF;
	}
  div.progressContainer{
          height: 20px;
          width: 96%;
          border-radius: 10px;
          background-color: #ddd;
          margin-left: 2%;
}
div.progress{
            background-color: #1C8DE0;
            border-radius: 10px;
            height:20px;
            line-height: 20px;
}
b{
              color:#fff;
              font-weight: 100;
              font-size: 12px;
              position:absolute;
	      left:40%; 
 }

</style>
